<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card class="box-card">
      <el-row :gutter="20">
        <el-col :span="8">
          <!-- 搜索区域 -->
          <el-input
            placeholder="请输入真实姓名"
            v-model="queryInfo.RealName"
            clearable
            @clear="getUsersData"
          >
            <el-button slot="append" icon="el-icon-search" @click="getUsersData(newVal)"></el-button>
          </el-input>
        </el-col>
        <el-col :span="4">
          <!-- 添加用户按钮 -->
          <el-button type="primary" @click="IsAddUserF=true">添加用户</el-button>
        </el-col>
      </el-row>
      <!-- 表格区域 -->
      <el-table :data="usersdate" border stripe style="width: 100%">
        <el-table-column type="index" width="40"></el-table-column>
        <el-table-column prop="id" label="ID" width="80"></el-table-column>
        <el-table-column prop="userCode" label="编号" width="100"></el-table-column>
        <el-table-column prop="userName" label="用户名" width="200"></el-table-column>
        <el-table-column prop="realName" label="真实姓名" width="200"></el-table-column>
        <el-table-column prop="stopFlag" label="禁用状态" width="200">
          <template slot-scope="scope">
            <el-switch v-model="scope.row.stopFlag" @change="changeUserStopFlag(scope.row)"></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="操作" min-width="200">
          <template slot-scope="scope">
            <!-- 修改按钮 -->
            <el-button type="primary" icon="el-icon-edit" size="mini" @click="edituser(scope.row)"></el-button>
            <!-- 删除按钮 -->
            <el-button type="danger" icon="el-icon-delete" size="mini" @click="delUser(scope.row)"></el-button>
            <!-- 修改角色 -->
            <el-tooltip effect="dark" content="修改角色" placement="top" :enterable="false">
              <el-button type="warning" icon="el-icon-share" size="mini" @click="allotRole(scope.row.id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.page"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>

      <!-- 添加用户组件 -->
      <adduser :IsAddUser="IsAddUserF" @IsShowAddUser="IsShowAddUserF" @shuaxUser="getUsersData"></adduser>
      <!-- 修改用户组件 -->
      <edituser :IsEditUser="IsEditUserF" :userdata="Userdata" @IsShowEditUser="IsShowEditUser" @shuaxdata="getUsersData" ></edituser>

    </el-card>
    <allotRole :dialogVisible="IsAllotRole" :userid="userID" @IsShowAllotRole="IsShowAllotRole"></allotRole>
  </div>
</template>

<script>
import adduser from "./AddUser";
import edituser from "./EditUser";
import allotRole from './AllotRole'
export default {
  created() {
    this.getUsersData();
  },
  components: {
    adduser,
    edituser,
    allotRole
  },
  data() {
    return {
      usersdate: [],
      total: 0,
      queryInfo: {
        RealName: "",
        page: 1,
        limit: 10
      },
      //是否打开添加用户弹窗
      IsAddUserF: false,
      //是否打开修改用户弹窗
      IsEditUserF:false,
      //是否打开分配角色的弹窗
      IsAllotRole:false,
      userID:0,
      Userdata:[]
    };
  },
  methods: {
    //获取用户列表
    getUsersData() {
      this.$post("/api/User/GetUserList", {
        RealName: this.queryInfo.RealName,
        page: this.queryInfo.page,
        limit: this.queryInfo.limit
      })
        .then(res => {
          if (res.code == 0) {
            this.usersdate = res.data;
            this.total = res.count;
          } else {
            this.$alert(res.msg, "提示");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //监听pagesize改变的事件
    handleSizeChange(newsize) {
      this.queryInfo.limit = newsize;
      this.getUsersData();
    },
    //监听页码值改变的事件
    handleCurrentChange(newpage) {
      this.queryInfo.page = newpage;
      this.getUsersData();
    },
    //监听开关的变化
    changeUserStopFlag(userStopFlag) {
      this.$get("/api/User/EditUserStopFlag", {
        id: userStopFlag.id,
        stopFlag: userStopFlag.stopFlag
      })
        .then(res => {
          if (res.code == 0) {
            this.$message({ message: res.msg, type: "success" });
          } else {
            userStopFlag.stopFlag = !userStopFlag.stopFlag;
            this.$message.error({ message: res.msg });
          }
        })
        .catch(err => {
          //this.$alert("网络异常");
          console.log(err);
        });
    },
    IsShowAddUserF(data) {
      this.IsAddUserF = data.IsShow;
    },
    IsShowEditUser(data){
      this.IsEditUserF=data.IsShow;
    },
    IsShowAllotRole(data){
      this.IsAllotRole=data.IsShow
    },
    //删除用户
    delUser(data){
      this.$confirm(' 是否删除此用户?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$get("/api/User/DelUser",{
            id:data.id
          }).then(res=>{
            if(res.code==0){
              this.$message({
                type: 'success',
                message: res.msg
              });
              this.getUsersData();
            }else{
              this.$message.error(res.msg);
            }
          }).catch(err=>{
            console.msg(err)
          })
          
        }).catch(() => {});
    },
    //点击修改用户事件
    edituser(data){
      this.Userdata=data;
      this.IsEditUserF=true;
    },
    allotRole(id){
      this.userID=id
      this.IsAllotRole=true
    }
  },
  watch: {
    "IsAddUserF": function(newVal) {
    }
  }
};
</script>

<style lang="less" scoped>
</style>